import React from 'react';
import {Spin, Card, Button, Row, Col, Table, Form, Divider, Popconfirm,
    Collapse, Icon, Alert, Modal, Message as msg, Anchor, Radio} from 'antd';
import PropTypes from 'prop-types';
import routes from './routes';
import {FORM_OPTIONS, TABLE, FIXED_COLUMN_WIDTH, DATE_FORMAT, DATETIME_FORMAT, FORM_ROW_OPTIONS, FILES_API} from '../constants';
import {PERMISSION, PANEL_CARD_COL_SPAN} from './constants';
import {getDetail, getDutyUnitsQuickly, getcClaimHistoriesList, getWorkItems,
    getClaimReason, getWarrantyPolicy, getPartCategory, getCheck} from './api';
import {injectIntl, language} from './intl';
import {formatAmount, conventEnumValueToString, formatDateTime, uuid} from '../utils';
import TextInput from 'Shared/components/TextInput';
import styles from './style.css';
import LocalizeInputNumber from '../common/LocalizeInputNumber';
import SearchSelect from 'Shared/components/SearchSelect';
import WrappedSelect from '../common/WrappedSelect';
import Return from '../common/Return';
import PartMultiSelectPanel from './PageAdd/PartMultiSelectPanel';
import SubDealerSelectPanel from './PageAdd/SubDealerSelectPanel';
import DutyUnitSelectPanel from './PageAdd/DutyUnitSelectPanel';
import MaterialTablePanel from './PageAdd/MaterialTablePanel';
import WorkItemTablePanel from './PageAdd/WorkItemTablePanel';
import ClaimHistoryPanel from './PageAdd/ClaimHistoryPanel';
import PartAssistPanel from './PageAdd/PartAssistPanel';
import {approveValidator, adjustValidator} from './validator';
import {currency, repairType, claimApprovedResult, claimUsedPartDealCategory,
    claimAthType, customerType, dutyUnitType, faultType, claimSigned, baseDataStatus, fileType} from '../Enum';
import {hasPermissions} from './utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import WorkItemSelectPanel from './PageAdd/WorkItemSelectPanel';
import ImageUpload from './PageAdd/ImageUpload';
import WorkItemPartSelectPanel from './WorkItemPartSelectPanel';
import AddSupplierPanel from './AddSupplierPanel';
const {Link} = Anchor;
const {Panel} = Collapse;
const FormItem = Form.Item;
const {Description} = DescriptionList;
const claimApprovedResultList = claimApprovedResult.toList(language);
const claimSignedList = claimSigned.toList(language);
const date = new Date();
const RadioGroup = Radio.Group;
const basePath = fetch.basePath || '';
const url = '/#/dcs/afterSales/claimApply/';
class ApprovePanel extends React.PureComponent {
    state = {
        loading: false,
        hasOperat: false,
        data: {
            isOut: false,
            outFee: 0
        },
        showSupplier: false,
        showDutyUnit: false,
        showPartMultiSelectPanel: false,
        showPartAssistPanel: false,
        details: [],
        claimWorkItemDetails: [],
        claimApprovedHis: [],
        isAccessory: false,
        claimAthDetails: [],
        claimMaterialDetails: [],
        claimHistories: {},
        isApproveComment: false,
        approveComments: [],
        warrantyPolicyMessage: '',
        workItem: {},
        partCategoryId: '',
        check: {},
        showWorkItem: false,
        needFixed: false,
        showWorkItemPart: false,
        usedPartId: '',
        showAddSupplierPanel: false
    }
    componentDidMount() {
        this.props.getDutyUnitList();
        if(this.props.id) {
            this.setState({loading: true});
            getDetail(this.props.id, {approve: this.props.page === 'approve'})
                .then(res => {
                    if(res.ok) {
                        this.setState({
                            loading: false,
                            data: this.props.page === 'approve' ? Object.assign({}, res.data, {
                                claimSigned: claimSigned.正常索赔,
                                claimSignedRemark: '',
                                approvedResult: undefined,
                                approveComment: '',
                                determinedSupplierId: res.data.supplierId,
                                determinedSupplierCode: res.data.supplierCode,
                                determinedSupplierName: res.data.supplierName,
                            }) : res.data,
                            details: res.data.details,
                            claimWorkItemDetails: res.data.claimWorkItemDetails,
                            claimApprovedHis: res.data.claimApprovedHis,
                            claimAthDetails: res.data.claimAthDetails,
                            claimMaterialDetails: res.data.claimMaterialDetails
                        });
                        this.getClaimHistories(res.data.vin, res.data.createTime, this.props.id);
                        this.getWorkItems(res.data.productCategoryCode, res.data.brandId, res.data.dealerId);
                        if(!res.data.claimApplyId)
                            this.getWarrantyPolicy(res.data, res.data.details, res.data.claimMaterialDetails);
                        this.getPartCategory(res.data.faultType);
                    } else
                        this.setState(({
                            loading: false
                        }));
                });
        }
        window.addEventListener('scroll', this.bindHandleScroll);
        window.scrollTo(0, 0);
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
        this.unmounted = true;
    }
    bindHandleScroll = () => {
        const fixedTop = document.getElementById('A_ID').offsetTop;
        window.onscroll = () => {
            const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
            //控制元素块A随鼠标滚动固定在顶部
            if(scrollTop > fixedTop)
                this.setState({
                    needFixed: true
                });
            else if(scrollTop === fixedTop)
                this.setState({needFixed: false});
        };
    }
    dutyUnitLabelMap = d => {
        if(d.id === undefined)
            return '';
        if(d)
            return `(${d.code})${d.name}`;
        return '';
    }
    getClaimHistories = (vin, createTime, claimId) => {
        this.setState({
            loading: true
        });
        getcClaimHistoriesList({
            vin,
            createTime,
            claimId
        })
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        claimHistories: res.data
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    getWorkItems = (productCategoryCode, brandId, dealerId) => {
        this.setState({
            loading: true
        });
        getWorkItems({
            productCategoryCode,
            brandId,
            dealerId
        })
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        workItem: res.data.content
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    getWarrantyPolicy = (data, claimMaterialDetails, details) => {
        this.setState({
            loading: true
        });
        const parts = [];
        claimMaterialDetails.map(v => parts.push(v.usedPartId));
        details.map(v => parts.push(v.usedPartId));
        getWarrantyPolicy({
            vehicleSoldId: data.vehicleSoldId,
            repairType: data.repairType,
            repairDate: data.repairDate,
            mileage: data.mileage,
            usedPartId: data.causePartId,
            brandId: data.brandId,
            subDealerId: data.subDealerId,
            claimApplyId: data.claimApplyId,
            dealerId: data.dealerId,
            id: data.id,
            parts
        })
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        warrantyPolicyMessage: res.data.content
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    getPartCategory = value => {
        this.setState({
            loading: true
        });
        getPartCategory({
            faultType: value
        })
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        partCategoryId: res.data.content.length > 0 ? res.data.content[0].id : ''
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    getCheck = () => {
        const {data, claimMaterialDetails} = this.state;
        getCheck({
            brandId: data.brandId,
            partId: claimMaterialDetails.find(v => v.isCaused === true).usedPartId,
            supplierId: data.determinedSupplierId,
            dutyUnitId: data.dutyUnitId,
            vehicleSoldId: data.vehicleSoldId,
            repairDate: data.repairDate,
            mileage: data.mileage,
            faultType: data.faultType
        })
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        check: res.data.payload
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    onChange = (value, name) => {
        if(name === 'approvedResult' && value !== claimApprovedResult.同意)
            return getClaimReason({
                type: value,
                status: baseDataStatus.生效
            })
                .then(res => {
                    if(res.ok)
                        this.setState({
                            loading: false,
                            approveComments: res.data.content.map(item => ({
                                text: item.description,
                                value: item.id
                            })),
                            isApproveComment: false,
                            data: Object.assign({}, this.state.data, {
                                approveComment: '',
                                [name]: value
                            })
                        });
                    else
                        this.setState(({
                            loading: false,
                            data: Object.assign({}, this.state.data, {
                                [name]: value
                            })
                        }));
                });
        if(name === 'approvedResult' && value === claimApprovedResult.同意)
            return this.setState({
                isApproveComment: true,
                data: Object.assign({}, this.state.data, {
                    approveComment: 'Agree',
                    [name]: value
                })
            });
        if(name === 'approveComment' && this.state.data.approvedResult !== claimApprovedResult.同意) {
            const approveComment = this.state.approveComments.find(v => v.value === value);
            const data = Object.assign({}, this.state.data, {
                [name]: approveComment ? approveComment.text : value
            });
            this.setState({
                data,
                hasOperat: true
            });
        } else {
            const data = Object.assign({}, this.state.data, {
                [name]: value
            });
            this.setState({
                data,
                hasOperat: true
            });
        }
    }
    onSelectPart = records => {
        const claimWorkItemDetails = this.state.claimWorkItemDetails || [];
        const claimMaterialDetails = this.state.claimMaterialDetails || [];
        const workItem = this.state.workItem;
        if(records.some(v => v.workItems.length === 0)) {
            records.forEach(r => {
                const indexMaterial = claimMaterialDetails.findIndex(v => v.usedPartId === r.id);
                if(indexMaterial === -1)
                    claimMaterialDetails.push({
                        isCaused: false,
                        usedPartId: r.id,
                        usedPartCode: r.code,
                        usedPartName: r.name,
                        newPartId: r.id,
                        newPartCode: r.code,
                        newPartName: r.name,
                        unit: r.unit,
                        price: r.price * r.priceRate,
                        quantity: 1,
                        materialFee: r.price * r.priceRate,
                        usedPartDealCategory: claimUsedPartDealCategory.销毁,
                        mgmtRate: r.mgmtFeeRate,
                        mgmtFee: r.mgmtFeeRate ? r.price * r.mgmtFeeRate * r.priceRate : 0,
                        priceRate: r.priceRate,
                        partCategoryId: r.partCategoryId,
                        isNeedPicture: r.isNeedPicture,
                        supplierId: r.supplierId,
                        supplierCode: r.supplierCode,
                        totalFee: (r.price * r.priceRate) + (r.mgmtFeeRate ? r.price * r.mgmtFeeRate * r.priceRate : 0),
                        partCategoryCode: r.partCategoryCode,
                        productCategoryCode: r.productCategoryCode
                    });
                if(r.workItems.length < 1 && workItem)
                    claimWorkItemDetails.push({
                        id: uuid(),
                        usedPartId: r.id,
                        usedPartCode: r.code,
                        workItemId: workItem.id,
                        workItemCode: workItem.code,
                        workItemName: workItem.name,
                        laborHour: workItem.laborHour,
                        laborPrice: workItem.laborPrice,
                        laborFee: workItem.laborHour / 100 * workItem.laborPrice,
                        remark: workItem.remark,
                        isDefault: true,
                        productCategoryCode: workItem.productCategoryCode,
                        partProductCategoryCodes: r.productCategoryCode,
                    });
                else
                    r.workItems.forEach(v => {
                        const index = claimWorkItemDetails.findIndex(o => o.workItemId === v.id);
                        if(index === -1) {
                            claimWorkItemDetails.push({
                                id: uuid(),
                                usedPartId: r.id,
                                usedPartCode: r.code,
                                workItemId: v.id,
                                workItemCode: v.code,
                                workItemName: v.name,
                                laborHour: v.laborHour,
                                laborPrice: v.laborPrice,
                                laborFee: v.laborHour / 100 * v.laborPrice,
                                remark: v.remark,
                                productCategoryCode: v.productCategoryCode,
                                partProductCategoryCodes: r.productCategoryCode,
                            });
                            v.assistWorkItems.forEach(o => {
                                const index = claimWorkItemDetails.findIndex(f => f.workItemId === o.id);
                                if(index === -1)
                                    claimWorkItemDetails.push({
                                        id: uuid(),
                                        usedPartId: r.id,
                                        usedPartCode: r.code,
                                        workItemId: o.id,
                                        workItemCode: o.code,
                                        workItemName: o.name,
                                        laborHour: o.laborHour,
                                        laborPrice: o.laborPrice,
                                        laborFee: o.laborHour / 100 * o.laborPrice,
                                        remark: o.remark,
                                        productCategoryCode: o.productCategoryCode,
                                        partProductCategoryCodes: r.productCategoryCode
                                    });
                            });
                        }
                    });
            });
            this.setState({
                claimWorkItemDetails: [...claimWorkItemDetails],
                claimMaterialDetails: [...claimMaterialDetails],
                hasOperat: true,
                showPartMultiSelectPanel: false
            });
        } else this.onSelectMaterials(records, claimWorkItemDetails, claimMaterialDetails);
    }
    onSelectMaterials = (records, claimWorkItemDetails, claimMaterialDetails) => {
        records.forEach(r => {
            const indexMaterial = claimMaterialDetails.findIndex(v => v.usedPartId === r.id);
            if(indexMaterial === -1)
                claimMaterialDetails.push({
                    isCaused: false,
                    usedPartId: r.id,
                    usedPartCode: r.code,
                    usedPartName: r.name,
                    newPartId: r.id,
                    newPartCode: r.code,
                    newPartName: r.name,
                    unit: r.unit,
                    price: r.price * r.priceRate,
                    quantity: 1,
                    materialFee: r.price * r.priceRate,
                    usedPartDealCategory: claimUsedPartDealCategory.销毁,
                    mgmtRate: r.mgmtFeeRate,
                    mgmtFee: r.mgmtFeeRate ? r.price * r.mgmtFeeRate * r.priceRate : 0,
                    priceRate: r.priceRate,
                    partCategoryId: r.partCategoryId,
                    isNeedPicture: r.isNeedPicture,
                    supplierId: r.supplierId,
                    supplierCode: r.supplierCode,
                    totalFee: (r.price * r.priceRate) + (r.mgmtFeeRate ? r.price * r.mgmtFeeRate * r.priceRate : 0),
                    partCategoryCode: r.partCategoryCode,
                    productCategoryCode: r.productCategoryCode
                });
            r.workItems.forEach(v => {
                const index = claimWorkItemDetails.findIndex(o => o.workItemId === v.id);
                if(index === -1) {
                    claimWorkItemDetails.push({
                        id: uuid(),
                        usedPartId: r.id,
                        usedPartCode: r.code,
                        workItemId: v.id,
                        workItemCode: v.code,
                        workItemName: v.name,
                        laborHour: v.laborHour,
                        laborPrice: v.laborPrice,
                        laborFee: v.laborHour / 100 * v.laborPrice,
                        remark: v.remark,
                        productCategoryCode: v.productCategoryCode,
                        partProductCategoryCodes: r.productCategoryCode,
                    });
                    v.assistWorkItems.forEach(o => {
                        const index = claimWorkItemDetails.findIndex(f => f.workItemId === o.id);
                        if(index === -1)
                            claimWorkItemDetails.push({
                                id: uuid(),
                                usedPartId: r.id,
                                usedPartCode: r.code,
                                workItemId: o.id,
                                workItemCode: o.code,
                                workItemName: o.name,
                                laborHour: o.laborHour,
                                laborPrice: o.laborPrice,
                                laborFee: o.laborHour / 100 * o.laborPrice,
                                remark: o.remark,
                                productCategoryCode: o.productCategoryCode,
                                partProductCategoryCodes: r.productCategoryCode
                            });
                    });
                }
            });
        });
        this.setState({
            claimWorkItemDetails: [...claimWorkItemDetails],
            claimMaterialDetails: [...claimMaterialDetails],
            hasOperat: true,
            showPartMultiSelectPanel: false
        });
    }
    onSelectPartAccessory = records => {
        const details = this.state.details || [];
        records.forEach(r => {
            const index = details.findIndex(v => v.usedPartId === r.id);
            if(index === -1)
                details.push({
                    isCaused: false,
                    usedPartId: r.id,
                    usedPartCode: r.code,
                    usedPartName: r.name,
                    unit: r.unit,
                    price: r.price * r.priceRate,
                    usedPartDealCategory: claimUsedPartDealCategory.销毁,
                    materialFee: r.price * r.priceRate,
                    priceRate: r.priceRate,
                    accessorySource: r.partAssistPartSource,
                    partId: r.partId,
                    minPackSize: r.minPackSize,
                    maxQty: r.maxQty,
                    usedQty: 0,
                    quantity: 0
                });
        });
        this.setState({
            details: [...details],
            hasOperat: true,
            showPartAssistPanel: false
        });
    }
    onClosePartAssistPanel = () => {
        this.setState({showPartAssistPanel: false});
    }
    onClosePartMultiSelectPanel = () => {
        this.setState({showPartMultiSelectPanel: false});
    }
    onDeleteAll = () => {
        this.setState({
            details: [],
            hasOperat: true
        });
    }
    onDeleteDetail = e => {
        const usedPartId = e.target.dataset.id;
        const tmp = this.state.details.filter(d => d.usedPartId !== usedPartId);
        this.setState({
            details: [...tmp],
            hasOperat: true
        });
    }
    onClickOkOnPopconfirm = () => {
        this.props.onCancel();
    }
    onSubmit = () => {
        const newprops = this.props;
        const {data, details, claimWorkItemDetails, claimMaterialDetails} = this.state;
        const isValid = approveValidator(data, details, claimMaterialDetails, claimWorkItemDetails);
        if(!isValid) {
            this.setState({
                validate: true
            });
            return;
        }
        if(!data.claimApplyId)
            this.getWarrantyPolicy(
                data,
                claimMaterialDetails,
                details
            );
        if(data.approvedResult === claimApprovedResult.同意) {
            this.setState({loading: true});
            getCheck({
                brandId: data.brandId,
                partId: claimMaterialDetails.find(v => v.isCaused === true).usedPartId,
                supplierId: data.determinedSupplierId,
                dutyUnitId: data.dutyUnitId,
                vehicleSoldId: data.vehicleSoldId,
                repairDate: data.repairDate,
                mileage: data.mileage,
                faultType: data.faultType
            })
                .then(res => {
                    if(res.ok) {
                        const {isReplacedDutyUnit, isDutyUnitWarranty, isEngineCode, istransmissionModel,
                            replacedDutyUnitCode, engineCodeDutyUnitCode, transmissionModelDutyUnitCode} = res.data;
                        if(isReplacedDutyUnit)
                            Modal.confirm({
                                title: newprops.intl.formatMessage({
                                    id: 'approvePanel.message.switch1',
                                    defaultMessage: '提示'
                                }),
                                content: newprops.intl.formatMessage({
                                    id: 'approvePanel.message.isReplacedDutyUnit1',
                                    defaultMessage: '当前供应商:'
                                }) + data.supplierCode + newprops.intl.formatMessage({
                                    id: 'approvePanel.message.isReplacedDutyUnit2',
                                    defaultMessage: ',存在可替换的供应商:'
                                }) + replacedDutyUnitCode + newprops.intl.formatMessage({
                                    id: 'approvePanel.message.isReplacedDutyUnit3',
                                    defaultMessage: ',是否替换?'
                                }),
                                onOk: () => {
                                    this.onReplacedDutyUnit(
                                        isDutyUnitWarranty,
                                        isEngineCode,
                                        istransmissionModel,
                                        engineCodeDutyUnitCode,
                                        transmissionModelDutyUnitCode,
                                        true,
                                        newprops);
                                },
                                onCancel: () => {
                                    this.onReplacedDutyUnit(
                                        isDutyUnitWarranty,
                                        isEngineCode,
                                        istransmissionModel,
                                        engineCodeDutyUnitCode,
                                        transmissionModelDutyUnitCode,
                                        false,
                                        newprops);
                                }
                            });
                        else this.onReplacedDutyUnit(
                            isDutyUnitWarranty,
                            isEngineCode,
                            istransmissionModel,
                            engineCodeDutyUnitCode,
                            transmissionModelDutyUnitCode,
                            false,
                            newprops);
                        this.setState({loading: true});
                    } else
                        this.setState(({
                            loading: false
                        }));
                });
        }
        if(data.approvedResult === claimApprovedResult.驳回) {
            this.setState({loading: true});
            newprops.onSubmitReject(data, details, claimMaterialDetails, claimWorkItemDetails).then(res => {
                if(res.success)
                    newprops.successReturn();
                if(!this.unmounted)
                    this.setState({loading: false});
            });
        }
        if(data.approvedResult === claimApprovedResult.拒赔) {
            this.setState({loading: true});
            newprops.onSubmitRefuse(data, details, claimMaterialDetails, claimWorkItemDetails).then(res => {
                if(res.success)
                    newprops.successReturn();
                if(!this.unmounted)
                    this.setState({loading: false});
            });
        }
    }
    onSubmitAdjust = () => {
        const newprops = this.props;
        const {data, details, claimWorkItemDetails, claimMaterialDetails} = this.state;
        const isValid = adjustValidator(data, details, claimMaterialDetails, claimWorkItemDetails);
        if(!isValid) {
            this.setState({
                validate: true
            });
            return;
        }
        this.setState({loading: true});
        if(!data.claimApplyId)
            this.getWarrantyPolicy(
                data,
                claimMaterialDetails,
                details
            );
        getCheck({
            brandId: data.brandId,
            partId: claimMaterialDetails.find(v => v.isCaused === true).usedPartId,
            supplierId: data.determinedSupplierId,
            dutyUnitId: data.dutyUnitId,
            vehicleSoldId: data.vehicleSoldId,
            repairDate: data.repairDate,
            mileage: data.mileage,
            faultType: data.faultType
        })
            .then(res => {
                if(res.ok) {
                    this.setState({loading: true});
                    const {isReplacedDutyUnit, isDutyUnitWarranty, isEngineCode, istransmissionModel,
                        replacedDutyUnitCode, engineCodeDutyUnitCode, transmissionModelDutyUnitCode} = res.data;
                    if(isReplacedDutyUnit)
                        Modal.confirm({
                            title: newprops.intl.formatMessage({
                                id: 'approvePanel.message.switch1',
                                defaultMessage: '提示'
                            }),
                            content: newprops.intl.formatMessage({
                                id: 'approvePanel.message.isReplacedDutyUnit1',
                                defaultMessage: '当前供应商:'
                            }) + data.supplierCode + newprops.intl.formatMessage({
                                id: 'approvePanel.message.isReplacedDutyUnit2',
                                defaultMessage: ',存在可替换的供应商:'
                            }) + replacedDutyUnitCode + newprops.intl.formatMessage({
                                id: 'approvePanel.message.isReplacedDutyUnit3',
                                defaultMessage: ',是否替换?'
                            }),
                            onOk: () => {
                                this.onReplacedDutyUnit(
                                    isDutyUnitWarranty,
                                    isEngineCode,
                                    istransmissionModel,
                                    engineCodeDutyUnitCode,
                                    transmissionModelDutyUnitCode,
                                    true,
                                    newprops);
                            },
                            onCancel: () => {
                                this.onReplacedDutyUnit(
                                    isDutyUnitWarranty,
                                    isEngineCode,
                                    istransmissionModel,
                                    engineCodeDutyUnitCode,
                                    transmissionModelDutyUnitCode,
                                    false,
                                    newprops);
                            }
                        });
                    else this.onReplacedDutyUnit(
                        isDutyUnitWarranty,
                        isEngineCode,
                        istransmissionModel,
                        engineCodeDutyUnitCode,
                        transmissionModelDutyUnitCode,
                        false,
                        newprops);
                } else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    onReplacedDutyUnit = (
        isDutyUnitWarranty,
        isEngineCode,
        istransmissionModel,
        engineCodeDutyUnitCode,
        transmissionModelDutyUnitCode,
        putIsReplacedDutyUnit,
        newprops
    ) => {
        const dutyUnitCode = this.state.data.dutyUnitCode;
        const faultTypeCode = this.state.data.faultType;
        if(isDutyUnitWarranty && dutyUnitCode !== 'GJB')
            Modal.confirm({
                title: newprops.intl.formatMessage({
                    id: 'approvePanel.message.switch1',
                    defaultMessage: '提示'
                }),
                content: newprops.intl.formatMessage({
                    id: 'approvePanel.message.isDutyUnitWarranty',
                    defaultMessage: '供应商担保期已超保，责任单位 是否改为 GJB'
                }),
                onOk: () => {
                    this.setState({
                        data: Object.assign({}, this.state.data, {
                            isDutyUnitWarranty: true
                        })
                    });
                    if(faultTypeCode === faultType.发动机)
                        this.onEngineCode(isEngineCode, engineCodeDutyUnitCode, putIsReplacedDutyUnit, true, newprops);
                    else if(faultTypeCode === faultType.变速箱)
                        this.onTransmissionSn(istransmissionModel, transmissionModelDutyUnitCode, putIsReplacedDutyUnit, true, newprops);
                    // eslint-disable-next-line no-unused-expressions
                    else newprops.page === 'approve'
                        ? this.onSubmitPass(putIsReplacedDutyUnit, false, false, newprops)
                        : this.onSubmitCheckAdjust(putIsReplacedDutyUnit, false, false, newprops);
                },
                onCancel: () => {
                    if(faultTypeCode === faultType.发动机)
                        this.onEngineCode(isEngineCode, engineCodeDutyUnitCode, putIsReplacedDutyUnit, false, newprops);
                    else if(faultTypeCode === faultType.变速箱)
                        this.onTransmissionSn(istransmissionModel, transmissionModelDutyUnitCode, putIsReplacedDutyUnit, false, newprops);
                    // eslint-disable-next-line no-unused-expressions
                    else newprops.page === 'approve'
                        ? this.onSubmitPass(putIsReplacedDutyUnit, false, false, newprops)
                        : this.onSubmitCheckAdjust(putIsReplacedDutyUnit, false, false, newprops);
                }
            });
        else if(faultTypeCode === faultType.发动机)
            this.onEngineCode(isEngineCode, engineCodeDutyUnitCode, putIsReplacedDutyUnit, false, newprops);
        else if(faultTypeCode === faultType.变速箱)
            this.onTransmissionSn(istransmissionModel, transmissionModelDutyUnitCode, putIsReplacedDutyUnit, false, newprops);
        // eslint-disable-next-line no-unused-expressions
        else newprops.page === 'approve'
            ? this.onSubmitPass(putIsReplacedDutyUnit, false, false, newprops)
            : this.onSubmitCheckAdjust(putIsReplacedDutyUnit, false, false, newprops);
    }
    onEngineCode = (
        isEngineCode,
        engineCodeDutyUnitCode,
        putIsReplacedDutyUnit,
        putIsDutyUnitWarranty,
        newprops
    ) => {
        if(isEngineCode)
            Modal.confirm({
                title: newprops.intl.formatMessage({
                    id: 'approvePanel.message.switch1',
                    defaultMessage: '提示'
                }),
                content: newprops.intl.formatMessage({
                    id: 'approvePanel.message.isEngineCode',
                    defaultMessage: '存在特殊责任单位 是否调整为:'
                }) + engineCodeDutyUnitCode,
                onOk: () => {
                    // eslint-disable-next-line no-unused-expressions
                    newprops.page === 'approve'
                        ? this.onSubmitPass(putIsReplacedDutyUnit, putIsDutyUnitWarranty, true, newprops)
                        : this.onSubmitCheckAdjust(putIsReplacedDutyUnit, putIsDutyUnitWarranty, true, newprops);
                },
                onCancel: () => {
                    // eslint-disable-next-line no-unused-expressions
                    newprops.page === 'approve'
                        ? this.onSubmitPass(putIsReplacedDutyUnit, putIsDutyUnitWarranty, false, newprops)
                        : this.onSubmitCheckAdjust(putIsReplacedDutyUnit, putIsDutyUnitWarranty, false, newprops);
                }
            });
            // eslint-disable-next-line no-unused-expressions
        else newprops.page === 'approve'
            ? this.onSubmitPass(putIsReplacedDutyUnit, putIsDutyUnitWarranty, false, newprops)
            : this.onSubmitCheckAdjust(putIsReplacedDutyUnit, putIsDutyUnitWarranty, false, newprops);
    }
    onTransmissionSn = (
        istransmissionModel,
        transmissionModelDutyUnitCode,
        putIsReplacedDutyUnit,
        putIsDutyUnitWarranty,
        newprops
    ) => {
        const {transmissionModel} = this.state.data;
        if(!transmissionModel)
            Modal.confirm({
                title: newprops.intl.formatMessage({
                    id: 'approvePanel.message.switch1',
                    defaultMessage: '提示'
                }),
                content: newprops.intl.formatMessage({
                    id: 'approvePanel.message.transmissionModel',
                    defaultMessage: '车辆信息不完整，变速箱型号为空，请联系管理人员维护，是否继续操作'
                }),
                onOk: () => {
                    // eslint-disable-next-line no-unused-expressions
                    newprops.page === 'approve'
                        ? this.onSubmitPass(putIsReplacedDutyUnit, putIsDutyUnitWarranty, false, newprops)
                        : this.onSubmitCheckAdjust(putIsReplacedDutyUnit, putIsDutyUnitWarranty, false, newprops);
                },
                // eslint-disable-next-line arrow-body-style
                onCancel: () => {
                    this.setState({loading: false});
                }
            });
        else if(istransmissionModel)
            Modal.confirm({
                title: newprops.intl.formatMessage({
                    id: 'approvePanel.message.switch1',
                    defaultMessage: '提示'
                }),
                content: newprops.intl.formatMessage({
                    id: 'approvePanel.message.istransmissionModel',
                    defaultMessage: '存在特殊责任单位 是否调整为:'
                }) + transmissionModelDutyUnitCode,
                onOk: () => {
                    // eslint-disable-next-line no-unused-expressions
                    newprops.page === 'approve'
                        ? this.onSubmitPass(putIsReplacedDutyUnit, putIsDutyUnitWarranty, true, newprops)
                        : this.onSubmitCheckAdjust(putIsReplacedDutyUnit, putIsDutyUnitWarranty, true, newprops);
                },
                onCancel: () => {
                    // eslint-disable-next-line no-unused-expressions
                    newprops.page === 'approve'
                        ? this.onSubmitPass(putIsReplacedDutyUnit, putIsDutyUnitWarranty, false, newprops)
                        : this.onSubmitCheckAdjust(putIsReplacedDutyUnit, putIsDutyUnitWarranty, false, newprops);
                }
            });
            // eslint-disable-next-line no-unused-expressions
        else newprops.page === 'approve'
            ? this.onSubmitPass(putIsReplacedDutyUnit, putIsDutyUnitWarranty, false, newprops)
            : this.onSubmitCheckAdjust(putIsReplacedDutyUnit, putIsDutyUnitWarranty, false, newprops);
    }
    onSubmitPass = (putIsReplacedDutyUnit, putIsDutyUnitWarranty, putEngineOrTransmission, newprops) => {
        const {data, details, claimWorkItemDetails, claimMaterialDetails} = this.state;
        let newData = {};
        this.setState({loading: true});
        if(data.faultType === faultType.发动机)
            newData = Object.assign({}, data, {
                isReplacedDutyUnit: putIsReplacedDutyUnit,
                isDutyUnitWarranty: putIsDutyUnitWarranty,
                isEngineCode: putEngineOrTransmission
            });
        else if(data.faultType === faultType.变速箱)
            newData = Object.assign({}, data, {
                isReplacedDutyUnit: putIsReplacedDutyUnit,
                isDutyUnitWarranty: putIsDutyUnitWarranty,
                istransmissionModel: putEngineOrTransmission,
            });
        else newData = Object.assign({}, data, {
            isReplacedDutyUnit: putIsReplacedDutyUnit,
            isDutyUnitWarranty: putIsDutyUnitWarranty
        });
        newprops.onSubmitPass(
            newData,
            details,
            claimMaterialDetails,
            claimWorkItemDetails
        ).then(res => {
            if(res.success)
                newprops.successReturn();
            if(!this.unmounted)
                this.setState({loading: false});
        });
    }
    onSubmitCheckAdjust = (putIsReplacedDutyUnit, putIsDutyUnitWarranty, putEngineOrTransmission, newprops) => {
        const {data, details, claimWorkItemDetails, claimMaterialDetails} = this.state;
        let newData = {};
        this.setState({loading: true});
        if(data.faultType === faultType.发动机)
            newData = Object.assign({}, data, {
                isReplacedDutyUnit: putIsReplacedDutyUnit,
                isDutyUnitWarranty: putIsDutyUnitWarranty,
                isEngineCode: putEngineOrTransmission
            });
        else if(data.faultType === faultType.变速箱)
            newData = Object.assign({}, data, {
                isReplacedDutyUnit: putIsReplacedDutyUnit,
                isDutyUnitWarranty: putIsDutyUnitWarranty,
                istransmissionModel: putEngineOrTransmission,
            });
        else newData = Object.assign({}, data, {
            isReplacedDutyUnit: putIsReplacedDutyUnit,
            isDutyUnitWarranty: putIsDutyUnitWarranty
        });
        newprops.onSubmitAdjust(newData, details, claimMaterialDetails, claimWorkItemDetails).then(res => {
            if(res.success)
                newprops.successReturn();
            if(!this.unmounted)
                this.setState({loading: false});
        });
    }
    onUpdateUsedQty = (usedQty, id) => {
        const details = this.state.details || [];
        const tmp = details.map(d => {
            if(d.usedPartId === id) {
                let quantity = 0;
                const tmpQuantity = usedQty > d.maxQty ? d.maxQty : usedQty;
                if(Number.isInteger(tmpQuantity / d.minPackSize))
                    quantity = tmpQuantity;
                else quantity = (Math.ceil(tmpQuantity / d.minPackSize) * d.minPackSize) > d.maxQty
                    ? d.maxQty : Math.ceil(tmpQuantity / d.minPackSize) * d.minPackSize;
                return Object.assign({}, d, {
                    usedQty,
                    materialFee: d.price * quantity,
                    quantity
                });
            }
            return d;
        });
        this.setState({
            details: tmp,
            hasOperat: true
        });
    }
    onClickAddAccessoryBtn = e => {
        e.stopPropagation();
        this.setState({
            showPartAssistPanel: true,
            isAccessory: true
        });
    }
    onClickAddBtn = e => {
        e.stopPropagation();
        this.setState({
            showPartMultiSelectPanel: true,
            isAccessory: false
        });
    }
    onSearchDutyUnit = value =>
        getDutyUnitsQuickly({
            filter: value,
            type: dutyUnitType.责任单位
        })
            .then(res => {
                const data = res.data;
                if(data)
                    return data.content;
            });
    onSelectDutyUnit = data => {
        this.setState({
            data: Object.assign({}, this.state.data, {
                dutyUnitId: data.id,
                dutyUnitCode: data.code,
                dutyUnitName: data.name
            }),
            showDutyUnit: false,
            hasOperat: true
        });
    }
    onClickDutyUnit = () => {
        this.setState({showDutyUnit: true});
    }
    onCloseDutyUnit = () => {
        this.setState({showDutyUnit: false});
    }
    
    onSearchSupplier = value =>
        getDutyUnitsQuickly({
            filter: value,
            type: dutyUnitType.索赔供应商,
            brandId: this.state.data.brandId,
            // partId: this.state.claimMaterialDetails.find(v => v.isCaused === true).usedPartId,
        })
            .then(res => {
                const data = res.data;
                if(data)
                    return data.content;
            });
    onSelectSupplier = data => {
        this.setState({
            data: Object.assign({}, this.state.data, {
                determinedSupplierId: data.id,
                determinedSupplierCode: data.code,
                determinedSupplierName: data.name,
                isNeedPictureSupplier: data.isNeedPicture
            }),
            showSupplier: false,
            hasOperat: true
        });
    }
    onClickSupplier = () => {
        this.setState({showSupplier: true});
    }
    onCloseSupplier = () => {
        this.setState({showSupplier: false});
    }
    onPartQuantityChange = (usedPartId, value) => {
        const materials = this.state.claimMaterialDetails;
        const tmp = materials.map(item => {
            if(item.usedPartId === usedPartId)
                return Object.assign({}, item, {
                    quantity: value,
                    mgmtFee: item.mgmtRate ? value * item.price * item.mgmtRate : 0,
                    materialFee: value * item.price,
                    totalFee: (value * item.price) + (item.mgmtRate ? value * item.price * item.mgmtRate : 0)
                });
            return item;
        });
        this.setState({
            claimMaterialDetails: tmp,
            hasOperat: true
        });
    };
    onWorkItemLaborHourChange = (id, value) => {
        const claimWorks = this.state.claimWorkItemDetails;
        const tmp = claimWorks.map(item => {
            if(item.id === id)
                return Object.assign({}, item, {
                    laborHour: value,
                    laborFee: value / 100 * item.laborPrice
                });
            return item;
        });
        this.setState({
            claimWorkItemDetails: tmp,
            hasOperat: true
        });
    };
    onWorkItemLaborPriceChange = (id, value) => {
        const claimWorks = this.state.claimWorkItemDetails;
        const tmp = claimWorks.map(item => {
            if(item.id === id)
                return Object.assign({}, item, {
                    laborPrice: value,
                    laborFee: value / 100 * item.laborHour
                });
            return item;
        });
        this.setState({
            claimWorkItemDetails: tmp,
            hasOperat: true
        });
    };
    onSelectParts = (usedPartId, value) => {
        const materials = this.state.claimMaterialDetails;
        const tmp = materials.map(item => {
            if(item.usedPartId === usedPartId)
                return Object.assign({}, item, {
                    newPartId: value.id,
                    newPartCode: value.code,
                    newPartName: value.name
                });
            return item;
        });
        this.setState({
            claimMaterialDetails: tmp,
            hasOperat: true
        });
    };
    onCausedCheck = e => {
        const materials = this.state.claimMaterialDetails;
        const usedPart = this.state.claimMaterialDetails.findIndex(v => v.isCaused === true);
        if(e.target.checked === true && usedPart !== -1)
            return msg.warn(this.props.intl.formatMessage({
                id: 'approvePanel.message.isCaused',
                defaultMessage: '已经存在主损件，请先取消已有的主损件！'
            }));
        const material = materials.find(v => v.usedPartId === e.target.id);
        // if(e.target.checked === true && material.partCategoryId !== this.state.partCategoryId)
        //     return msg.warn(this.props.intl.formatMessage({
        //         id: 'approvePanel.message.partCategoryId',
        //         defaultMessage: '备件分类与故障类型不一致，不允许为主损件，请重新选择主损件。'
        //     }));
        const isCaused = e.target.checked;
        if(isCaused)
            this.setState({
                data: Object.assign({}, this.state.data, {
                    determinedSupplierId: material.supplierId,
                    determinedSupplierCode: material.supplierCode
                })
            });
        else
            this.setState({
                data: Object.assign({}, this.state.data, {
                    determinedSupplierId: '',
                    determinedSupplierCode: '',
                    determinedSupplierName: '',
                    isNeedPictureSupplier: undefined
                })
            });
        const tmp = materials.map(item => {
            if(item.usedPartId === e.target.id)
                return Object.assign({}, item, {
                    isCaused
                });
            return item;
        });
        this.setState({
            claimMaterialDetails: tmp,
            hasOperat: true
        });
    };
    onDeleteAllParts = () => {
        this.setState({
            claimWorkItemDetails: [],
            claimMaterialDetails: [],
            details: [],
            hasOperat: true
        });
    };
    onDeletePart = usedPartId => {
        const materials = this.state.claimMaterialDetails;
        const tmpParts = materials.filter(m => m.usedPartId !== usedPartId);
        this.setState({
            claimMaterialDetails: [...tmpParts],
            hasOperat: true
        });
        const details = this.state.claimWorkItemDetails.filter(d => d.usedPartId !== usedPartId);
        //删除辅料
        const accessoryDetails = this.state.details || [];
        const tmp = accessoryDetails.filter(d => d.partId !== usedPartId);
        this.setState({
            claimWorkItemDetails: [...details],
            details: [...tmp],
            hasOperat: true
        });
    };
    onAddWorkItemPart = usedPartId => {
        this.setState({
            showWorkItemPart: true,
            usedPartId
        });
    };
    onCloseWorkItemPart = () => {
        this.setState({
            showWorkItemPart: false,
            usedPartId: ''
        });
    }
    onSelectWorkItemPart = records => {
        const {claimMaterialDetails, claimWorkItemDetails, usedPartId} = this.state;
        const claimMaterialDetail = claimMaterialDetails.find(v => v.usedPartId === usedPartId);
        records.forEach(r => {
            const index = claimWorkItemDetails.findIndex(o => o.workItemId === r.id);
            if(index === -1) {
                claimWorkItemDetails.push({
                    id: uuid(),
                    usedPartId: claimMaterialDetail.usedPartId,
                    usedPartCode: claimMaterialDetail.usedPartCode,
                    workItemId: r.id,
                    workItemCode: r.code,
                    workItemName: r.name,
                    laborHour: r.laborHour,
                    laborPrice: r.laborPrice,
                    laborFee: r.laborHour / 100 * r.laborPrice,
                    remark: r.remark,
                    productCategoryCode: r.productCategoryCode,
                    partProductCategoryCodes: claimMaterialDetail.productCategoryCode,
                });
                r.assistWorkItems.forEach(o => {
                    const index = claimWorkItemDetails.findIndex(f => f.workItemId === o.id);
                    if(index === -1)
                        claimWorkItemDetails.push({
                            id: uuid(),
                            usedPartId: claimMaterialDetail.usedPartId,
                            usedPartCode: claimMaterialDetail.usedPartCode,
                            workItemId: o.id,
                            workItemCode: o.code,
                            workItemName: o.name,
                            laborHour: o.laborHour,
                            laborPrice: o.laborPrice,
                            laborFee: o.laborHour / 100 * o.laborPrice,
                            remark: o.remark,
                            productCategoryCode: o.productCategoryCode,
                            partProductCategoryCodes: claimMaterialDetail.productCategoryCode
                        });
                });
            }
        });
        this.setState({
            claimWorkItemDetails: [...claimWorkItemDetails],
            hasOperat: true,
            showWorkItemPart: false,
            usedPartId: ''
        });
    }
    onDeleteWorkItem = id => {
        const details = this.state.claimWorkItemDetails.filter(d => d.id !== id);
        this.setState({
            claimWorkItemDetails: [...details],
            hasOperat: true
        });
    };
    onDeleteAllWorkItem = ids => {
        const details = this.state.claimWorkItemDetails.filter(d => !ids.includes(d.id));
        this.setState({
            claimWorkItemDetails: [...details],
            hasOperat: true
        });
    };
    onClickApproveCommentBtn = () => {
        this.setState({
            isApproveComment: !this.state.isApproveComment
        });
    }
    onClickStopPropagation = e => {
        e.stopPropagation();
    }
    onClickAddWorkItem = e => {
        e.stopPropagation();
        const {claimMaterialDetails} = this.state;
        if(!claimMaterialDetails.some(d => d.isCaused === true))
            return msg.warning(this.props.intl.formatMessage({
                id: 'validator.message.isCaused',
                defaultMessage: '请选择一个材料为主损件'
            }));
        this.setState({showWorkItem: true});
    }
    onCloseWorkItem = () => {
        this.setState({showWorkItem: false});
    }
    onSelectWorkItem = records => {
        const {claimMaterialDetails, claimWorkItemDetails} = this.state;
        const claimMaterialDetail = claimMaterialDetails.find(v => v.isCaused === true);
        records.forEach(r => {
            const index = claimWorkItemDetails.findIndex(o => o.workItemId === r.id);
            if(index === -1)
                claimWorkItemDetails.push({
                    id: uuid(),
                    usedPartId: claimMaterialDetail.usedPartId,
                    usedPartCode: claimMaterialDetail.usedPartCode,
                    workItemId: r.id,
                    workItemCode: r.code,
                    workItemName: r.name,
                    laborHour: r.laborHour,
                    laborPrice: r.laborPrice,
                    laborFee: r.laborHour / 100 * r.laborPrice,
                    remark: r.remark,
                    productCategoryCode: r.productCategoryCode,
                    partProductCategoryCodes: claimMaterialDetail.productCategoryCode,
                });
        });
        this.setState({
            claimWorkItemDetails: [...claimWorkItemDetails],
            hasOperat: true,
            showWorkItem: false
        });
    }
    onChangeDutyUnit = e => {
        const {name, value} = e.target;
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }
    onClickaddSupplierBtn = () => {
        this.setState({
            showAddSupplierPanel: true,
            hasOperat: true
        });
    }
    onCloseAddSupplier = () => {
        this.setState({
            showAddSupplierPanel: false,
        });
    }
    onSelectAddSupplier = record => {
        const data = Object.assign({}, this.state.data, {
            determinedSupplierId: record.id,
            determinedSupplierCode: record.code,
            determinedSupplierName: record.name,
        });
        this.setState({
            data,
            showAddSupplierPanel: false,
        });
    }
    render() {
        const {formatMessage} = this.props.intl;
        const {data, details, loading, claimWorkItemDetails, claimMaterialDetails,
            claimAthDetails, claimApprovedHis, claimHistories, approveComments, isApproveComment, needFixed, usedPartId} = this.state;
        const {dutyUnits} = this.props;
        const partIds = claimMaterialDetails.map(v => v.usedPartId);
        const determinedSupplierInfo = data.determinedSupplierId ? {
            id: data.determinedSupplierId,
            code: data.determinedSupplierCode,
            name: data.determinedSupplierName,
        } : null;
        const validateClaimSigned = !data.claimSigned && this.state.validate ? 'error' : null;
        const validateApprovedResult = !data.approvedResult && this.state.validate ? 'error' : null;
        const validateApproveComment = !data.approveComment && this.state.validate ? 'error' : null;
        const validateClaimSignedRemark = data.claimSignedRemark && data.claimSignedRemark.length > 200 && this.state.validate ? 'error' : null;
        
        const claimAthDetailTuPhoto = claimAthDetails.find(v => v.type === claimAthType.图片资料 && v.fileType === fileType.图片) || {};
        const claimAthDetailTuFile = claimAthDetails.find(v => v.type === claimAthType.图片资料 && v.fileType === fileType.文件) || {};
        const claimAthDetailFaPhoto = claimAthDetails.find(v => v.type === claimAthType.发票扫描图片 && v.fileType === fileType.图片) || {};
        const claimAthDetailFaFile = claimAthDetails.find(v => v.type === claimAthType.发票扫描图片 && v.fileType === fileType.文件) || {};
        const submitable = !hasPermissions(PERMISSION.approve, this.props.permissions);
        //工时费
        let laborFee = 0;
        //材料费
        let materialFee = 0;
        //管理费
        let mgmtFee = 0;
        //辅料费
        let assistantFee = 0;
        //费用合计
        let totalFee = 0;

        if(claimWorkItemDetails)
            claimWorkItemDetails.forEach(d => {
                laborFee += (d.laborFee);
            });
        if(claimMaterialDetails)
            claimMaterialDetails.forEach(d => {
                materialFee += (d.materialFee);
                mgmtFee += d.mgmtFee;
            });
        if(details)
            details.forEach(d => {
                assistantFee += (d.materialFee);
            });
        totalFee = laborFee + materialFee + mgmtFee + assistantFee + data.outFee;
        const colums = [{
            title: formatMessage({
                id: 'approvePanel.usedPartCode',
                defaultMessage: '旧件编号'
            }),
            dataIndex: 'usedPartCode'
        },
        {
            title: formatMessage({
                id: 'approvePanel.usedPartName',
                defaultMessage: '旧件名称'
            }),
            dataIndex: 'usedPartName'
        },
        {
            title: formatMessage({
                id: 'approvePanel.usedPartDealCategory',
                defaultMessage: '旧件处理政策'
            }),
            dataIndex: 'usedPartDealCategory',
            render: text => conventEnumValueToString(claimUsedPartDealCategory, text)
        },
        {
            title: formatMessage({
                id: 'approvePanel.unit',
                defaultMessage: '计量单位'
            }),
            dataIndex: 'unit'
        },
        {
            title: formatMessage({
                id: 'approvePanel.usedQty',
                defaultMessage: '索赔用量'
            }),
            dataIndex: 'usedQty',
            render: (text, record) => {
                const validate = (text === null || text === undefined) ? {validateStatus: 'error'} : null;
                return (
                    <FormItem {...validate}>
                        <LocalizeInputNumber
                            min={0}
                            id={record.usedPartId}
                            precision={2}
                            value={text} onBlur={this.onUpdateUsedQty}/>
                    </FormItem>
                );
            }
        },
        {
            title: formatMessage({
                id: 'approvePanel.quantity',
                defaultMessage: '计价数量'
            }),
            dataIndex: 'quantity'
        }, {
            title: details && details.length > 0
                ? (
                    <Popconfirm placement="topRight" title={formatMessage({
                        id: 'approvePanel.column.allDelete',
                        defaultMessage: '是否确认全部删除？'
                    })} onConfirm={this.onDeleteAll} >
                        <a>{formatMessage({
                            id: 'approvePanel.column.empty',
                            defaultMessage: '清空'
                        })}</a>
                    </Popconfirm>
                )
                : <a>{formatMessage({
                    id: 'approvePanel.column.empty',
                    defaultMessage: '清空'
                })}</a>,
            dataIndex: 'usedPartId',
            fixed: 'right',
            width: FIXED_COLUMN_WIDTH,
            render: text => <a data-id={text} onClick={this.onDeleteDetail}>{formatMessage({
                id: 'approvePanel.column.delete',
                defaultMessage: '删除'
            })}</a>
        }];
        if(!this.props.isMoneyVisible)
            colums.splice(6, 0,
                {
                    title: formatMessage({
                        id: 'approvePanel.price',
                        defaultMessage: '单价'
                    }),
                    dataIndex: 'price',
                    render: text => formatAmount(text)
                },
                {
                    title: formatMessage({
                        id: 'approvePanel.materialFee',
                        defaultMessage: '材料费合计'
                    }),
                    dataIndex: 'materialFee',
                    render: text => formatAmount(text)
                });
        const columResults = [{
            title: formatMessage({
                id: 'approvePanel.approverName',
                defaultMessage: '审核人'
            }),
            dataIndex: 'approverName'
        },
        {
            title: formatMessage({
                id: 'approvePanel.approveComment',
                defaultMessage: '审核意见'
            }),
            dataIndex: 'approveComment'
        },
        {
            title: formatMessage({
                id: 'approvePanel.approvedResult',
                defaultMessage: '审核结果'
            }),
            dataIndex: 'approveResult'
        },
        {
            title: formatMessage({
                id: 'approvePanel.approveTime',
                defaultMessage: '审核时间'
            }),
            dataIndex: 'approveTime',
            render: text => formatDateTime(text, DATETIME_FORMAT)
        }];
        const determinedSupplierComp = data.brandId && claimMaterialDetails.some(v => v.isCaused === true)
            ? (<div onClick={this.onClickStopPropagation}><SearchSelect
                value={determinedSupplierInfo}
                placeholder={this.props.intl.formatMessage({
                    id: 'approvePanel.form.supplierId.placeholder1',
                    defaultMessage: '请输入供应商名称或编号进行查询'
                })}
                onSelect={this.onSelectSupplier}
                onSearch={this.onSearchSupplier}
                keyIndex="id"
                labelMap={this.dutyUnitLabelMap}
                onClickSearchBtn={this.onClickSupplier} />
            <Button
                size="small"
                onClick={this.onClickaddSupplierBtn}>
                {formatMessage({
                    id: 'approvePanel.operation.addSupplier',
                    defaultMessage: '增加供应商'
                })}
            </Button></div>) : (<TextInput name="determinedSupplierId"
                value={''} disabled placeholder={this.props.intl.formatMessage({
                    id: 'approvePanel.dealerComp.placeholder',
                    defaultMessage: '请先选择品牌和主损件'
                })} />);
        const radioDutyUnits = [];
        dutyUnits.forEach(v =>
            radioDutyUnits.push(<Col key={v.id} {...FORM_OPTIONS.col}><Radio className={styles.radioheight} key={v.id} value={v.id}>{`(${v.code})${v.name}`}</Radio></Col>)
        );
        return (
            <div id={'latoutRef'} className="form-standard">
                <Spin spinning={this.state.loading}>
                    <div id={'A_ID'} className={needFixed ? styles.aFixed : styles.alertMessage}>
                        {this.state.warrantyPolicyMessage && <Alert
                            message={formatMessage({
                                id: 'approvePanel.alert.warrantyPolicies',
                                defaultMessage: '整车索赔政策校验'
                            })}
                            description={this.state.warrantyPolicyMessage}
                            type="warning"
                            showIcon />}
                    </div>
                    <Anchor className={styles.toc_affix}
                        showInkInFixed={true}>
                        <Link href={`${location.hash}#components-anchor-common`} title={this.props.intl.formatMessage({
                            id: 'approvePanel.anchor.common',
                            defaultMessage: '基本信息'
                        })} />
                        <Link href={`${location.hash}#components-anchor-vehicleInfo`} title={this.props.intl.formatMessage({
                            id: 'approvePanel.anchor.vehicleInfo',
                            defaultMessage: '车辆信息'
                        })} />
                        <Link href={`${location.hash}#components-anchor-material`} title={this.props.intl.formatMessage({
                            id: 'approvePanel.anchor.material',
                            defaultMessage: '材料信息'
                        })} />
                        {!data.isOtherArea && <Link href={`${location.hash}#components-anchor-claimHistory`} title={this.props.intl.formatMessage({
                            id: 'newPanel.anchor.claimHistory',
                            defaultMessage: '历史索赔'
                        })} />}
                    </Anchor>
                    <Collapse className={styles.collapseMarginTop}>
                        <Panel id="components-anchor-common" header={<Row><Col {...PANEL_CARD_COL_SPAN}><Form>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.code',
                                        defaultMessage: '索赔单号'
                                    })}
                                    {...FORM_OPTIONS.item} >
                                        {data.code}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={formatMessage({
                                            id: 'approvePanel.operation.brandId',
                                            defaultMessage: '品牌'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {`(${data.brandCode})${data.brandName}`}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.vin',
                                            defaultMessage: 'VIN'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {data.vin}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.operation.repairType',
                                            defaultMessage: '索赔类型'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {conventEnumValueToString(repairType, data.repairType)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.repairCode',
                                        defaultMessage: '维修单号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.repairCode}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.claimApplyCode',
                                        defaultMessage: '索赔预申请单号'
                                    })} {...FORM_OPTIONS.item}>
                                        {<a href={`${basePath}${url}${data.claimApplyId}/detail`}
                                            target="_blank"
                                            rel="noopener noreferrer">
                                            {data.claimApplyCode}
                                        </a>}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.repairDate',
                                            defaultMessage: '维修日期'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.repairDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.salesDealerCode',
                                        defaultMessage: '经销商编号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.subDealerCode}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.mileage',
                                        defaultMessage: '行驶里程'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.mileage}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.saleDate',
                                        defaultMessage: '实销日期'
                                    })} {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.saleDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.shipDate',
                                        defaultMessage: '发车日期'
                                    })} {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.shipDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.productionDate',
                                            defaultMessage: '生产日期'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.productionDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                {/* <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.createTime',
                                            defaultMessage: '申请日期'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.createTime, DATE_FORMAT)}
                                    </FormItem>
                                </Col> */}
                            </Row>
                        </Form></Col></Row>} key="1">
                            <Form>
                                <Row>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem
                                            label={this.props.intl.formatMessage({
                                                id: 'approvePanel.form.isOtherArea',
                                                defaultMessage: '是否跨区域索赔'
                                            })}
                                            {...FORM_OPTIONS.item}>
                                            {data.isOtherArea ? 'Yes' : 'No'}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.subClaimCode',
                                            defaultMessage: '经销商申请单号'
                                        })} {...FORM_OPTIONS.item}>
                                            {data.subClaimCode}
                                        </FormItem>
                                    </Col>
                                    {data.claimApplyCode && <Col {...FORM_OPTIONS.col}>
                                        <FormItem
                                            label={this.props.intl.formatMessage({
                                                id: 'approvePanel.form.claimApplyCreateTime',
                                                defaultMessage: '预申请日期'
                                            })}
                                            {...FORM_OPTIONS.item}>
                                            {formatDateTime(data.claimApplyCreateTime, DATE_FORMAT)}
                                        </FormItem>
                                    </Col>}
                                    {
                                        data.repairType === repairType.备件索赔 &&
                                        <Col {...FORM_OPTIONS.col}>
                                            <FormItem
                                                label={this.props.intl.formatMessage({
                                                    id: 'approvePanel.form.partPurchasedDate',
                                                    defaultMessage: '自费购件时间'
                                                })}
                                                {...FORM_OPTIONS.item}>
                                                {formatDateTime(data.partPurchasedDate, DATE_FORMAT)}
                                            </FormItem>
                                        </Col>
                                    }
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem
                                            label={this.props.intl.formatMessage({
                                                id: 'approvePanel.form.createName',
                                                defaultMessage: '索赔人'
                                            })}
                                            {...FORM_OPTIONS.item}>
                                            {data.creatorName}
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Form>
                        </Panel>
                        <Panel id="components-anchor-vehicleInfo" header={<Form>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.productCategoryCode',
                                        defaultMessage: '车型编号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.productCategoryCode}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.customerSoldType',
                                        defaultMessage: '客户性质'
                                    })} {...FORM_OPTIONS.item}>
                                        {conventEnumValueToString(customerType, data.customerSoldType)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.country',
                                        defaultMessage: '国家'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.country}
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>} key="2">
                            <Form>
                                <Row>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.wholesaleDealerCode',
                                            defaultMessage: '总代'
                                        })} {...FORM_OPTIONS.item}>
                                            {`(${data.wholesaleDealerCode})${data.wholesaleDealerName}`}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.currency',
                                            defaultMessage: '币种'
                                        })} {...FORM_OPTIONS.item}>
                                            {conventEnumValueToString(currency, data.currency)}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.engineCode',
                                            defaultMessage: '发动机号'
                                        })} {...FORM_OPTIONS.item}
                                        validateStatus={!data.engineCode && this.state.validate ? 'error' : null}
                                        required>
                                            <TextInput
                                                name="engineCode"
                                                value={data.engineCode}
                                                onBlur={this.onChange} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.transmissionSn',
                                            defaultMessage: '变速箱号'
                                        })} {...FORM_OPTIONS.item}
                                        validateStatus={!data.transmissionSn && this.state.validate ? 'error' : null}
                                        required>
                                            <TextInput
                                                name="transmissionSn"
                                                value={data.transmissionSn}
                                                onBlur={this.onChange} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.productCategoryName',
                                            defaultMessage: '车型名称'
                                        })} {...FORM_OPTIONS.item}>
                                            {data.productCategoryName}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.annoucementNumber',
                                            defaultMessage: '公告号'
                                        })} {...FORM_OPTIONS.item}>
                                            {data.annoucementNumber}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.isKD',
                                            defaultMessage: 'CBU/KD索赔'
                                        })} {...FORM_OPTIONS.item}>
                                            {data.isKD === true && formatMessage({
                                                id: 'approvePanel.operation.kd',
                                                defaultMessage: 'KD'
                                            })}
                                            {data.isKD === false && formatMessage({
                                                id: 'approvePanel.operation.cbu',
                                                defaultMessage: 'CBU'
                                            })}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.customerName',
                                            defaultMessage: '用户姓名'
                                        })} {...FORM_OPTIONS.item}>
                                            {data.customerName}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.cellPhoneNumber',
                                            defaultMessage: '用户电话'
                                        })} {...FORM_OPTIONS.item}>
                                            {data.cellPhoneNumber}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.companyName',
                                            defaultMessage: '用户公司'
                                        })} {...FORM_OPTIONS.item}>
                                            {data.companyName}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.address',
                                            defaultMessage: '用户地址'
                                        })} {...FORM_OPTIONS.item}>
                                            {data.address}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.email',
                                            defaultMessage: '用户Email'
                                        })} {...FORM_OPTIONS.item}>
                                            {data.email}
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Form>
                        </Panel>
                    </Collapse>
                    <Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6']}>
                        <Panel id="components-anchor-material" header={<Row>
                            <Col span={10}>{formatMessage({
                                id: 'approvePanel.operation.claimMaterialDetails',
                                defaultMessage: '材料清单'
                            })}<Divider type="vertical" />{formatMessage({
                                id: 'approvePanel.form.supplierId',
                                defaultMessage: '供应商'
                            })}{': '}{data.supplierCode}<Divider type="vertical" />{formatMessage({
                                id: 'approvePanel.form.faultType',
                                defaultMessage: '故障类型'
                            })}{': '}{conventEnumValueToString(faultType, data.faultType)}</Col>
                            <Col span={14}><Button
                                size="small"
                                className={styles.materialBtn}
                                onClick={this.onClickAddBtn}>
                                {formatMessage({
                                    id: 'approvePanel.operation.newDetail',
                                    defaultMessage: '新增材料'
                                })}
                            </Button></Col>
                        </Row>} key="1">
                            <Row>
                                <MaterialTablePanel
                                    key={data.brandId}
                                    brandId={data.brandId}
                                    onSelectParts={this.onSelectParts}
                                    onDeletePart={this.onDeletePart}
                                    onDeleteAllParts={this.onDeleteAllParts}
                                    onPartQuantityChange={this.onPartQuantityChange}
                                    onCausedCheck={this.onCausedCheck}
                                    onAddWorkItemPart={this.onAddWorkItemPart}
                                    productCategoryCode={data.productCategoryCode}
                                    repairDate={data.repairDate}
                                    page={this.props.page}
                                    isMoneyVisible={this.props.isMoneyVisible}
                                    data={claimMaterialDetails}/>
                            </Row>
                            <Row>
                                <Col>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.faultItem',
                                            defaultMessage: '故障代码'
                                        })}
                                        {...FORM_ROW_OPTIONS.item}>
                                        <span className="value-font">({data.faultItemCode}) {data.faultItemName}</span>
                                    </FormItem>
                                </Col></Row>
                            <Row>
                                <Col>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.faultMode',
                                            defaultMessage: '故障原因'
                                        })}
                                        {...FORM_ROW_OPTIONS.item}>
                                        <span className="value-font">({data.faultModeCode}) {data.faultModeName}</span>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.faultDescription',
                                        defaultMessage: '详细故障描述'
                                    })} {...FORM_ROW_OPTIONS.item}>
                                        {data.faultDescription}
                                    </FormItem>
                                </Col>
                            </Row>
                        </Panel>
                        <Panel header={formatMessage({
                            id: 'approvePanel.operation.attachment',
                            defaultMessage: '附件清单'
                        })} key="2">
                            {claimAthDetails && claimAthDetails.length > 0
                                ? <div>
                                    {
                                        (claimAthDetailTuPhoto || claimAthDetailTuFile) &&
                                        <DescriptionList title={formatMessage({
                                            id: 'approvePanel.card.attachmentTu',
                                            defaultMessage: '图片资料附件'
                                        })} size="large">
                                            {(claimAthDetailTuPhoto.attachments && claimAthDetailTuPhoto.attachments.length > 0) &&
                                            <div><ImageUpload fileList={claimAthDetailTuPhoto.attachments} isUpload={false}/>
                                                <Divider /></div>}
                                            {(claimAthDetailTuFile.attachments && claimAthDetailTuFile.attachments.length > 0) &&
                                                claimAthDetailTuFile.attachments.map(item => (<Description key={item.fileId}>
                                                    <a icon="download" download
                                                        href={`${FILES_API.files}/${item.fileId}`} size="small">{item.fileName}</a></Description>))}
                                        </DescriptionList>
                                    }
                                    <Divider className={styles.divider}/>
                                    {
                                        data.repairType === repairType.备件索赔 && (claimAthDetailFaPhoto || claimAthDetailFaFile) &&
                                        <DescriptionList title={formatMessage({
                                            id: 'approvePanel.card.attachmentFa',
                                            defaultMessage: '发票扫描图片附件'
                                        })} size="large">
                                            {(claimAthDetailFaPhoto.attachments && claimAthDetailFaPhoto.attachments.length > 0) &&
                                            <div><ImageUpload fileList={claimAthDetailTuPhoto.attachments} isUpload={false}/>
                                                <Divider /></div>}
                                            {(claimAthDetailFaFile.attachments && claimAthDetailFaFile.attachments.length > 0) &&
                                                claimAthDetailFaFile.attachments.map(item => (<Description key={item.fileId}>
                                                    <a icon="download" download
                                                        href={`${FILES_API.files}/${item.fileId}`} size="small">{item.fileName}</a></Description>))}
                                        </DescriptionList>
                                    }
                                </div>
                                : formatMessage({
                                    id: 'approvePanel.content.noAttachment',
                                    defaultMessage: '暂无附件'
                                })}
                        </Panel>
                        <Panel header={formatMessage({
                            id: 'approvePanel.operation.claimWorkItemDetails',
                            defaultMessage: '项目清单'
                        })}
                        extra={<div>
                            <Button
                                size="small"
                                onClick={this.onClickAddWorkItem}>
                                {formatMessage({
                                    id: 'approvePanel.operation.newWorkItem',
                                    defaultMessage: '新增项目'
                                })}
                            </Button>
                        </div>} key="3">
                            <WorkItemTablePanel
                                key={data.brandId}
                                page={this.props.page}
                                isMoneyVisible={this.props.isMoneyVisible}
                                onDeleteWorkItem={this.onDeleteWorkItem}
                                onDeleteAllWorkItem={this.onDeleteAllWorkItem}
                                onWorkItemLaborHourChange={this.onWorkItemLaborHourChange}
                                onWorkItemLaborPriceChange={this.onWorkItemLaborPriceChange}
                                data={claimWorkItemDetails}/>
                        </Panel>
                        <Panel header={formatMessage({
                            id: 'approvePanel.operation.isAccessory',
                            defaultMessage: '辅料清单'
                        })}
                        extra={<div>
                            <Button
                                size="small"
                                name="accessory"
                                onClick={this.onClickAddAccessoryBtn}>
                                {formatMessage({
                                    id: 'approvePanel.operation.newAccessory',
                                    defaultMessage: '新增辅料'
                                })}
                            </Button>
                        </div>} key="4">
                            <Table
                                className="white-space-nowrap"
                                columns={colums}
                                rowKey="usedPartId"
                                pagination={false}
                                dataSource={details}
                                {...TABLE} />
                        </Panel>
                        {
                            !data.isOtherArea && <Panel id="components-anchor-claimHistory" header={formatMessage({
                                id: 'approvePanel.operation.claimHistory',
                                defaultMessage: '历史索赔信息'
                            })} key="5">
                                <ClaimHistoryPanel data={claimHistories} />
                            </Panel>
                        }
                        <Panel header={formatMessage({
                            id: 'approvePanel.operation.claimApprovedHis',
                            defaultMessage: '历史审核信息'
                        })} key="6">
                            <Table
                                className="white-space-nowrap"
                                columns={columResults}
                                rowKey="id"
                                pagination={false}
                                dataSource={claimApprovedHis}
                                {...TABLE} />
                        </Panel>
                    </Collapse>
                    {!this.props.isMoneyVisible &&
                    <Card title={formatMessage({
                        id: 'approvePanel.operation.feeInfo',
                        defaultMessage: '索赔费用'
                    })}>
                        <Row>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'newPanel.form.laborFee',
                                        defaultMessage: '工时费'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    {formatAmount(laborFee)}
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'newPanel.form.materialFee',
                                        defaultMessage: '材料费'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    {formatAmount(materialFee)}
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'newPanel.form.assistantFee',
                                        defaultMessage: '辅料费'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    {formatAmount(assistantFee)}
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'newPanel.form.mgmtFee',
                                        defaultMessage: '管理费'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    {formatAmount(mgmtFee)}
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'newPanel.form.totalFee',
                                        defaultMessage: '费用合计'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    {formatAmount(totalFee)}
                                </FormItem>
                            </Col>
                        </Row>
                    </Card>}
                    <Card
                        title={this.props.page === 'approve' ? formatMessage({
                            id: 'approvePanel.operation.approve',
                            defaultMessage: '审核区域'
                        }) : formatMessage({
                            id: 'approvePanel.operation.adjust',
                            defaultMessage: '调整区域'
                        })}>
                        <Form>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.determinedSupplierId',
                                            defaultMessage: '判定供应商'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        validateStatus={!data.determinedSupplierId && this.state.validate ? 'error' : null}
                                        required>
                                        {determinedSupplierComp}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row className="row-margin">
                                <Col>
                                    <Card title={<div><span className={styles.spandutyUnit}>*</span>{formatMessage({
                                        id: 'approvePanel.form.dutyUnitId',
                                        defaultMessage: '责任部门'
                                    })}</div>}>
                                        <RadioGroup name="dutyUnitId" onChange={this.onChangeDutyUnit} value={data.dutyUnitId}>
                                            {radioDutyUnits}
                                        </RadioGroup>
                                    </Card>
                                </Col>
                            </Row>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.operation.claimSigned',
                                            defaultMessage: '索赔标记'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        validateStatus={validateClaimSigned}
                                        required>
                                        <WrappedSelect
                                            name="claimSigned"
                                            value={data.claimSigned}
                                            options={claimSignedList}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.operation.approvedResult',
                                            defaultMessage: '审核结果'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        validateStatus={validateApprovedResult}
                                        required>
                                        <WrappedSelect
                                            name="approvedResult"
                                            value={data.approvedResult}
                                            options={claimApprovedResultList}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.date',
                                            defaultMessage: '审核时间'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {formatDateTime(date, DATETIME_FORMAT)}
                                    </FormItem>
                                </Col>
                            </Row>
                            {
                                data.claimSigned === claimSigned.异议索赔 && <Row className="row-margin">
                                    <Col>
                                        <FormItem label={formatMessage({
                                            id: 'approvePanel.operation.claimSignedRemark',
                                            defaultMessage: '索赔标记备注'
                                        })} {...FORM_ROW_OPTIONS.item}
                                        validateStatus={validateClaimSignedRemark}
                                        required>
                                            <TextInput
                                                type="textarea"
                                                name="claimSignedRemark"
                                                value={data.claimSignedRemark}
                                                onBlur={this.onChange} />
                                        </FormItem>
                                    </Col>
                                </Row>
                            }
                            <Row className="row-margin">
                                <Col>
                                    <FormItem label={<span>
                                        {formatMessage({
                                            id: 'approvePanel.operation.approveComment',
                                            defaultMessage:
                                                        '审核意见'
                                        })}
                                        <a style={{
                                            marginLeft: '8px'
                                        }}
                                        title={formatMessage({
                                            id: 'approvePanel.operation.approveComment',
                                            defaultMessage: '审核意见'
                                        })}
                                        onClick={this.onClickApproveCommentBtn}>
                                            {data.approvedResult !== claimApprovedResult.同意 && <Icon type="edit" />}
                                        </a>
                                    </span>} {...FORM_ROW_OPTIONS.item}
                                    validateStatus={validateApproveComment}
                                    required>
                                        {isApproveComment ? <TextInput
                                            type="textarea"
                                            name="approveComment"
                                            value={data.approveComment}
                                            onBlur={this.onChange} /> : <WrappedSelect
                                            name="approveComment"
                                            options={approveComments}
                                            value={data.approveComment}
                                            onChange={this.onChange} />}
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </Card>
                    <Card className={styles.optionBtn}>
                        <Button
                            type="primary"
                            onClick={this.props.page === 'approve' ? this.onSubmit : this.onSubmitAdjust}
                            disabled={!submitable}
                            loading={loading}>
                            {formatMessage({
                                id: 'approvePanel.operation.onSubmit',
                                defaultMessage: '确认'
                            })}
                        </Button>
                    </Card>
                    {
                        this.state.showPartMultiSelectPanel &&
                        <PartMultiSelectPanel
                            currentSelectRowkeys={claimMaterialDetails}
                            brandId={data.brandId}
                            dealerId={data.dealerId}
                            selectKey={data.id}
                            productCategoryCode={data.productCategoryCode ? data.productCategoryCode : 'ProductCategoryCode'}
                            repairDate={data.repairDate}
                            onCancel={this.onClosePartMultiSelectPanel}
                            onSelect={this.onSelectPart} />
                    }
                    {
                        this.state.showDealerSelectPanel &&
                        <SubDealerSelectPanel
                            selectKey={data.dealerId}
                            onCancel={this.onCloseDealerSelectPanel}
                            onSelect={this.onSelectDealer} />
                    }
                    {
                        this.state.showDutyUnit &&
                        <DutyUnitSelectPanel
                            type={dutyUnitType.责任单位}
                            isApprevor={true}
                            selectKey={data.supplierId}
                            onCancel={this.onCloseDutyUnit}
                            onSelect={this.onSelectDutyUnit} />
                    }
                    {
                        this.state.showSupplier &&
                        <DutyUnitSelectPanel
                            isApprevor={false}
                            type={dutyUnitType.索赔供应商}
                            brandId={this.state.data.brandId}
                            selectKey={data.supplierId}
                            onCancel={this.onCloseSupplier}
                            onSelect={this.onSelectSupplier} />
                    }
                    {
                        this.state.showPartAssistPanel &&
                        <PartAssistPanel
                            currentSelectRowkeys={details}
                            brandId={data.brandId}
                            dealerId={data.dealerId}
                            selectKey={data.id}
                            partIds={partIds}
                            repairDate={data.repairDate}
                            productCategoryCode={data.productCategoryCode ? data.productCategoryCode : 'ProductCategoryCode'}
                            onCancel={this.onClosePartAssistPanel}
                            onSelect={this.onSelectPartAccessory} />
                    }
                    {
                        this.state.showWorkItem &&
                        <WorkItemSelectPanel
                            currentSelectRowkeys={claimWorkItemDetails}
                            brandId={data.brandId}
                            dealerId={data.dealerId}
                            productCategoryCode={data.productCategoryCode ? data.productCategoryCode : 'ProductCategoryCode'}
                            selectKey={data.workItemId}
                            onCancel={this.onCloseWorkItem}
                            onSelect={this.onSelectWorkItem} />
                    }
                    {
                        this.state.showWorkItemPart &&
                        <WorkItemPartSelectPanel
                            brandId={data.brandId}
                            dealerId={data.dealerId}
                            currentSelectRowkeys={claimWorkItemDetails}
                            vehicleSoldId={data.vehicleSoldId}
                            usedPartId={usedPartId}
                            selectKey={data.workItemId}
                            onCancel={this.onCloseWorkItemPart}
                            onSelect={this.onSelectWorkItemPart} />
                    }
                    {
                        this.state.showAddSupplierPanel &&
                        <AddSupplierPanel
                            brandId={data.brandId}
                            selectKey={data.id}
                            onCancel={this.onCloseAddSupplier}
                            onSelect={this.onSelectAddSupplier} />
                    }
                    
                </Spin>
                <div className="page-toolbar">
                    <Return
                        disabled={this.state.loading}
                        onConfirm={this.onClickOkOnPopconfirm}
                        showWarning={this.state.hasOperat} />
                </div>
            </div>
        );
    }
}

ApprovePanel.propTypes = {
    initEnum: PropTypes.object.isRequired,
    permissions: PropTypes.array.isRequired,
    successReturn: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    onSubmitPass: PropTypes.func.isRequired,
    onSubmitReject: PropTypes.func.isRequired,
    dutyUnits: PropTypes.array,
    enterprise: PropTypes.object,
    getDutyUnitList: PropTypes.func,
    history: PropTypes.object,
    id: PropTypes.string,
    intl: PropTypes.object,
    isDealerUser: PropTypes.bool,
    page: PropTypes.string,
};

import {connect} from 'react-redux';
import {
    tableSearch,
    onApprove,
    onReject,
    onRefuse,
    onAdjust,
    getDutyUnitList
} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
import {createSelector} from 'reselect';
const getinitEnumData = createSelector(
    state => state.getIn(['page', 'domainData', 'initData']),
    init => {
        const initData = init.toJS();
        const brands = initData.brands ? initData.brands.map(item => ({
            text: `${'('}${item.code}${')'}${item.name}`,
            value: item.id
        })) : [];
        return {
            brands
        };
    }
);
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getEnterprise = selectorFactory(['page', 'domainData', 'initData', 'enterprise']);
const getDutyUnits = selectorFactory(['page', 'domainData', 'dutyUnits', 'data']);
const mapStateToProps = (state, props) => ({
    isDealerUser: state.getIn((['page', 'domainData', 'initData', 'isDealerUser'])),
    isMoneyVisible: state.getIn((['page', 'domainData', 'initData', 'isMoneyVisible'])),
    initEnum: getinitEnumData(state),
    enterprise: getEnterprise(state),
    permissions: getPermissions(state),
    dutyUnits: getDutyUnits(state),
});
const mapDispatchToProps = (dispatch, props) => ({
    onSubmitPass: (data, details, claimMaterialDetails, claimWorkItemDetails) =>
        dispatch(onApprove(data, details, claimMaterialDetails, claimWorkItemDetails)),
    onSubmitReject: (data, details, claimMaterialDetails, claimWorkItemDetails) =>
        dispatch(onReject(data, details, claimMaterialDetails, claimWorkItemDetails)),
    onSubmitRefuse: (data, details, claimMaterialDetails, claimWorkItemDetails) =>
        dispatch(onRefuse(data, details, claimMaterialDetails, claimWorkItemDetails)),
    onSubmitAdjust: (data, details, claimMaterialDetails, claimWorkItemDetails) =>
        dispatch(onAdjust(data, details, claimMaterialDetails, claimWorkItemDetails)),
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
    onCancel: () => {
        props.history.push(routes.query.url());
    },
    getDutyUnitList: () => dispatch(getDutyUnitList()),
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(ApprovePanel));
